<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="index.css">
    <title>金十</title>  
</head>
<body>
    <noscript>
      <strong>We're sorry but something doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
        <div class="nav">
          <div class="user">
            <img src="./public/imgs/userHead.jpg" style="margin: 0 15px;" alt />
            <span>欢迎，木板<span class="navArrowDonw"></span></span>
          </div>
        </div>
        <div class="main">
          <div class="left">
            <div class="container">
              <div class="banner">
                <img src="./public/imgs/banner.jpg" alt />
              </div>
              <div class="phonecontent">
                <div class="video borderBottom">
                  <p class="info">交易曦游记：记录真实交易员的人物纪实片</p>
                  <div class="mark" id="videobox">
                    <div class="shareImg hidden-phone">
                        <a class="share" style="margin-left: 80px;" title="分享到微信" href="#"></a>
                        <a class="share" href="#"></a>
                        <a class="share" href="#"></a>
                        <a class="share" href="#"></a>
                    </div>
                    <!-- <img class="shareImg hidden-phone" src="./public/imgs/share.jpg" alt /> -->
                    <div class="play"><img style="width:120px;height:120px;" src="./public/imgs/play.png" alt=""></div>
                    <div class="myVideo">
                      <video
                        id='myVideo'
                        src="http://qukufile2.qianqian.com/data2/video/ae259cd3f8883a642844adf012bfbad3/608002247/608002247.mp4"
                      ></video>
                    </div>
                  </div>
                </div>
                <div class="introduction visible-phone hidden-PC">
                  <p class="userTitle">交易员人物介绍</p>
                  <div class="users">
                    <div class="userItem">
                      <img src="./public/imgs/right_user.jpg" class="userImg" alt="">
                      <p>林则徐<span class="styleSpan"><span class="arrowUp"></span></span></p>
                    </div>
                    <div class="userItem">
                      <img src="./public/imgs/right_user.jpg" class="userImg" alt="">
                      <p>林则徐<span class="styleSpan opacity_3"><span class="arrowDown"></span></span></p>
                    </div>
                    <div class="userItem">
                      <img src="./public/imgs/right_user.jpg" class="userImg" alt="">
                      <p>林则徐<span class="styleSpan opacity_3"><span class="arrowDown"></span></span></p>
                    </div>
                    <div class="userItem">
                      <img src="./public/imgs/right_user.jpg" class="userImg" alt="">
                      <p>林则徐<span class="styleSpan opacity_3"><span class="arrowDown"></span></span></p>
                    </div>
                  </div>
                  <div class = "mwt_border" >   
                      <span class = "arrow_t_int" > </span >   
                      <span class = "arrow_t_out" > </span >  
                      1785年，福建，清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。
                  </div >
                  <p class="infoStyle1 margin-bottom_35px phoneFontStyle"><span class="phoneCircle hidden-PC visible-phone1"></span>本集讨论话题<span class="phoneCircle hidden-PC visible-phone1"></span></p>
                  <p class="talk-phone">交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗？</p>
                  <div class="votes-phone">
                    <div class="vote-phone">
                      <div class="vote-top">
                        <div class="topBox">
                          <img src="./public/imgs/left.png" alt="">
                          <div class="vote-btn">投票</div>
                        </div>
                      </div>
                      <div class="vote-bottom">已投<span>1209</span>票</div>
                    </div>
                    <div class="vote-phone">
                      <div class="vote-top">
                        <div class="topBox">
                          <img src="./public/imgs/right.png" alt="">
                          <div class="vote-btn vote-btn1">投票</div>
                        </div>
                      </div>
                      <div class="vote-bottom">已投<span>1209</span>票</div>
                    </div>
                  </div>
                </div>
                <div class="old borderBottom">
                  <div class="oldHead titleMargin">
                    <div class="title">
                      <img class="icon" src="./public/imgs/huojian.jpg" alt />
                      <p class="titleFont">往期回顾</p>
                      <img style="padding-top:5px" src="./public/imgs/share_s.jpg" alt />
                    </div>
                    <a href>查看更多</a>
                  </div>
                  <div class="content">
                    <div class="item oldVideo" srcURL="http://qukufile2.qianqian.com/data2/video/5b55a43ab9f4bf18960b40ed9b5a2cb1/607997330/607997330.mp4">
                      <img src="./public/imgs/item1.jpg" alt />
                      <div class="itemP">
                        <p>八周交易计划2 《我的信仰》</p>
                        <p>2017-01-20</p>
                      </div>
                    </div>
                    <div class="item oldVideo" srcURL="http://qukufile2.qianqian.com/data2/video/8970159e9c5b336724e9df9f2b61ed03/608000828/608000828.mp4">
                      <img src="./public/imgs/item1.jpg" alt />
                      <div class="itemP">
                        <p>八周交易计划2 《我的信仰》</p>
                        <p>2017-01-20</p>
                      </div>
                    </div>
                    <div class="item oldVideo hidden-phone" srcURL="http://qukufile2.qianqian.com/data2/video/589525916/f29cab06b7c24de4847a93ba5ab8b9b2/589525916.mp4">
                      <img src="./public/imgs/item1.jpg" alt />
                      <div class="itemP">
                        <p>八周交易计划2 《我的信仰》</p>
                        <p>2017-01-20</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="message">
                  <div class="header titleMargin">
                    <div class="title" style="justify-content:flex-start;">
                      <img class="icon" src="./public/imgs/huojian.jpg" alt />
                      <p class="titleFont">留言板</p>
                      <img style="padding-top:5px" src="./public/imgs/share_s.jpg" alt />
                    </div>
                  </div>
                  <div class="content">
                    <div class="topic">
                      <div class="topic-content">
                        <img src="./public/imgs/topic.jpg" alt />
                        <p class="fontStyle4">交易简单看来，不外乎上涨下跌，赌博不外乎输赢。很多人看来，这两者都是很大风险的，但实际交易的风险就不可控了吗？交易员和赌徒之间到底差别什么？作为交易员的你，又是怎样觉得呢？</p>
                      </div>
                    </div>
                    <div class="flag">
                      <div class="flag-left">
                        <p class="circle"></p>
                        <p class="rect"></p>
                        <p class="circle"></p>
                      </div>
                      <div class="flag-right">
                        <p class="circle"></p>
                        <p class="rect"></p>
                        <p class="circle"></p>
                      </div>
                    </div>
                    <div class="pannel">
                      <div class="send">
                        <div class="send_left">
                          <img style="margin-right: 25px;" src="./public/imgs/sendIcon.jpg" alt />
                          <p>评论需要登录，您还没有登录</p>
                        </div>
                        <div class="send_right">
                          <div class="register">注册</div>
                          <div class="login">登录</div>
                        </div>
                      </div>
                      <div class="hr">
                        <p class="newHead">最新评论(149)</p>
                      </div>
                      <div class="newContent">
                        <div class="item">
                          <div class="hot">0</div>
                          <div class="itemChild">
                            <div class="user">
                              <img src="./public/imgs/user.jpg" alt />
                              <div class="titleFont">
                                <p class="userName">扭转乾坤</p>
                                <p class="location">
                                  <span>温州</span>
                                  <span>10:06</span>
                                </p>
                              </div>
                            </div>
                            <div class="userMessage">大部分的赌徒都是赌久必输，而只有部分职业赌徒是赌久必赢的。可以说，赌久必输是生活中常见的现象</div>
                            <div class="response">
                              <img src="./public/imgs/responseIcon.jpg" alt />
                              <p>回复</p>
                            </div>
                          </div>
                        </div>
                        <div class="item">
                          <div class="hot">2</div>
                          <div class="itemChild">
                            <div class="user">
                              <img src="./public/imgs/user.jpg" alt />
                              <div class="titleFont">
                                <p class="userName">扭转乾坤</p>
                                <p class="location">
                                  <span>广州</span>
                                  <span>09:34</span>
                                </p>
                              </div>
                            </div>
                            <div class="userMessage">交易员是猎人，捕捉市场动态；交易员是心理分析师，分析别人交易心态的同时也被别人分析着</div>
                            <div class="response">
                              <img src="./public/imgs/responseIcon.jpg" alt />
                              <p>回复</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="float">
            <div class="rightbox">
              <div class="right">
                <div class="content">
                  <div class="hidden-PC phoneCloseBtn visible-phone1">×</div>
                  <p class="infoStyle1 top">交易员人物介绍</p>
                  <div class="user user1">
                    <img class="phoneUserImg" src="./public/imgs/right_user.jpg" alt />
                    <div class="userInfo">
                      <div class="infoStyle2">
                        <span>
                          林则徐（
                          <span>1785</span>年）,
                        </span>
                        <span style="padding-left:5px;">福建</span>
                      </div>
                      <div class="infoStyle4" style="width: 240px;">清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</div>
                    </div>
                  </div>
                  <div class="user user1 visible-phone" style="display:none;">
                    <img class="phoneUserImg" src="./public/imgs/right_user.jpg" alt />
                    <div class="userInfo">
                      <div class="infoStyle2">
                        <span>
                          林则徐（
                          <span>1785</span>年）,
                        </span>
                        <span style="padding-left:5px;">福建</span>
                      </div>
                      <div class="infoStyle4" style="width: 240px;">清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</div>
                    </div>
                  </div>
                  <div class="user user1 visible-phone" style="display:none;">
                    <img class="phoneUserImg" src="./public/imgs/right_user.jpg" alt />
                    <div class="userInfo">
                      <div class="infoStyle2">
                        <span>
                          林则徐（
                          <span>1785</span>年）,
                        </span>
                        <span style="padding-left:5px;">福建</span>
                      </div>
                      <div class="infoStyle4" style="width: 240px;">清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</div>
                    </div>
                  </div>
                  <div class="user user1 visible-phone" style="display:none;">
                    <img class="phoneUserImg" src="./public/imgs/right_user.jpg" alt />
                    <div class="userInfo">
                      <div class="infoStyle2">
                        <span>
                          林则徐（
                          <span>1785</span>年）,
                        </span>
                        <span style="padding-left:5px;">福建</span>
                      </div>
                      <div class="infoStyle4" style="width: 240px;">清朝时期的政治家、思想家和诗人，因其主张严禁鸦片,在中国有“民族英雄”之誉。</div>
                    </div>
                  </div>
                  <p class="infoStyle1 margin-bottom_35px phoneFontStyle"><span class="phoneCircle hidden-PC visible-phone1"></span>本集讨论话题<span class="phoneCircle hidden-PC visible-phone1"></span></p>
                  <p class="infoStyle2 infoStyle2-phone">交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗？</p>
                  <div class="votes hidden-phone">
                    <div class="vote">
                      <div class="box" style="border-radius: 0;">
                        <div class="button button1">投票</div>
                        <p class="infoStyle2">我是选项1</p>
                      </div>
                      <p class="infoStyle2 pCenter">
                        已投
                        <span>1209</span>票
                      </p>
                    </div>
                    <div class="vote">
                      <div class="box">
                        <div class="button button2">投票</div>
                        <p class="infoStyle2">我是选项2</p>
                      </div>
                      <p class="infoStyle2 pCenter">
                        已投
                        <span>1209</span>票
                      </p>
                    </div>
                  </div>
                  <div class="hidden-PC votes-phone">
                    <div class="vote-phone">
                      <div class="vote-top">
                        <div class="topBox">
                          <img src="./public/imgs/left.png" alt="">
                          <div class="vote-btn">投票</div>
                        </div>
                      </div>
                      <div class="vote-bottom">已投<span>1209</span>票</div>
                    </div>
                    <div class="vote-phone">
                      <div class="vote-top">
                        <div class="topBox">
                          <img src="./public/imgs/right.png" alt="">
                          <div class="vote-btn vote-btn1">投票</div>
                        </div>
                      </div>
                      <div class="vote-bottom">已投<span>1209</span>票</div>
                    </div>
                  </div>
                  <img class="hidden-phone" src="./public/imgs/bitmap.jpg" alt />
                  <p class="infoStyle3 hidden-phone">线下沙龙招募活动</p>
                  <p
                    class="infoStyle4 hidden-phone"
                  >交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗？交易简单看来，不外乎上涨下跌，赌博不外乎输赢。交易员是赌徒吗？交易简单看来？</p>
                  <div class="details hidden-phone">活动详情</div>
                  <hr style="color:#f0f3f5;width:100%;" />
                  <div class="join">
                    <p class="infoStyle4">加入我们《交易曦游记》大家庭吧！</p>
                    <div class="wx">
                      <img src="./public/imgs/QRcode.jpg" alt />
                      <div class="wxinfo">
                        <p class="wxname infoStyle4 ">交易曦游记</p>
                        <p class="wxusername infoStyle4 ">
                          微信号：
                          <span>jin10_domi</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="footer"></div>
            </div>
          </div>
        </div>
      </div>
    <script type="text/javascript">
        window.onload = function () {
            console.log('123')
            let right = document.getElementsByClassName('rightbox')[0];
            document.onscroll = function(event){
              if(document.body.clientWidth > 768 && scrollY > 90){
                right.style.position = 'fixed';
                right.style.top = '0';
                right.style.marginTop = "25px";
                right.style.marginRight = "12.5%";
              }else{
                right.style.position = 'relative';
                right.style.marginTop = "0px";
                right.style.marginRight = '0px';
                right.style.top = null;
              }
            };
            let close = document.getElementsByClassName('phoneCloseBtn')[0];
            let left = document.getElementsByClassName('left')[0];
            let introduction = document.getElementsByClassName('introduction')[0];
            let float = document.getElementsByClassName('float')[0];
            introduction.onclick = function() {
              if(!float.style.display || float.style.display == 'none'){
                document.documentElement.scrollTop = 0;
                float.style.display = 'block';
                left.style.opacity = 0.3;
              }
            }
            close.onclick = function() {
              float.style.display = 'none';
              left.style.opacity = 1;
            }
            let flag = false;
            let video = document.getElementById('myVideo');
            video.onclick = function(el) {
              flag = !flag;
              flag? video.play():video.pause();
              if(flag){
                video.play();
                document.getElementsByClassName('play')[0].style.display = "none";
              }else{
                document.getElementsByClassName('play')[0].style.display = "flex";
              }
            }
            video.onended = function() {
              document.getElementsByClassName('play')[0].style.display = "flex";
            }
            let oldVideoList = [].slice.call(document.getElementsByClassName('item oldVideo'));
            oldVideoList.forEach(item => {
              item.onclick = function(){
                video.src = item.getAttribute("srcURL");
                flag = true;
                document.getElementsByClassName('play')[0].style.display = "none";
                document.documentElement.scrollTop = 0;
                video.play();
              }
            })
            let hotList = [].slice.call(document.getElementsByClassName('hot'));
            let clickCallback = function(dom) {
              let flag = false;
              return function() {
                console.log(dom);
                if(!flag){
                  flag = !flag;
                  dom.innerHTML = parseInt(dom.innerText) + 1;
                  dom.style.color = 'red';
                }else{
                  flag = !flag;
                  dom.innerHTML = parseInt(dom.innerText) - 1;
                  dom.style.color = '#b4a0a0';
                }
              }
            }
            hotList.forEach(item => {
              item.onclick = clickCallback(item);
            })
            let shareList = [
                'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=',
                'http://v.t.sina.com.cn/share/share.php?',
                'https://connect.qq.com/widget/shareqq/iframe_index.html?',
                'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?'
            ]
            let shareBtnList = [].slice.call(document.getElementsByClassName('share'));
            shareBtnList.forEach((item, index) => {
                item.onclick = function() {
                    if(index == 0){
                        href = shareList[index] + encodeURIComponent(video.src) + '&title=' + encodeURIComponent('金十');
                    }else{
                        href = shareList[index]+ 'url=' + encodeURIComponent(video.src) + '&title=' + encodeURIComponent('金十');
                    }
                    window.open(href)
                }
            })

          }
    </script>
    <script>
      var phoneWidth = parseInt(window.screen.width);
      var phoneHeight = parseInt(window.screen.height);
      var phoneScale = phoneWidth/768;//除以的值按手机的物理分辨率
      console.log(phoneScale)
      var ua = navigator.userAgent;
      if (/Android (\d+\.\d+)/.test(ua)) {
      　　var version = parseFloat(RegExp.$1);
      　　// andriod 2.3
      　　if (version > 2.3) {
      　　　　document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">');
      　　// andriod 2.3以上
     　　 } else {
      　　　　document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');
      　　}
      // 其他系统
      } else {
      　　document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">');
      }
     </script>
    </body>
</html>